<template>
	<!-- public final static String USED_KEY = "used";
	    public final static String USED_MSG = "已使用";
	
	    public final static String UNUSED_KEY = "unused";
	    public final static String UNUSED_MSG = "未使用";
	
	    public final static String OVER_KEY = "over";
	    public final static String OVER_MSG = "过期";
	
	    public final static String UNPLAYED_KEY = "unplayed";
	    public final static String UNPLAYED_MSG = "未开始"; -->
	<div>
		<ma-body>
			<ma-refresh slot="content">
				<div class="big-box">
					<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
					<div class="title-box">
						<span class="title-line"></span>
						<div class="title">
							<span class="jiu-font30-fff">优先购</span>
							<span class="jiu-font32-555">FIRST BUY</span>
						</div>
					</div>
					
					<div class="list-box">
						<block v-if="page.list.length != 0">
							<div class="item-box" v-for="item in page.list">
								<image :src="item.spu.cover" mode="aspectFill" class="product-img"></image>
								<div class="item-info">
									<span class="item-title">{{ item.spu.spuTitle }}</span>
									<span class="item-time">开始时间: {{ item.info.startTime }}</span>
									<span class="item-time">结束时间: {{ item.info.endTime }}</span>
									<div class="end">
										<span class="look-btn" v-if="item.userPriority.useStatus == 'unused'" @tap="toDetail(item.spu.spuId,item.info,item.userPriority)">查看</span>
										<span class="look-btn" style="background-color: #555;color: #000;box-shadow: none;" v-else-if="item.userPriority.useStatus == 'over'">已失效</span>
										<span class="look-btn" style="background-color: #555;color: #000;box-shadow: none;" v-else-if="item.userPriority.useStatus == 'used'">已使用</span>
										<span class="look-btn" style="background-color: #555;color: #000;box-shadow: none;" v-else-if="item.userPriority.useStatus == 'unplayed'" @tap="toDetail(item.spu.spuId,item.info,item.userPriority)">未开始</span>
									</div>
								</div>
							</div>
						</block>
						<div class="img-box" v-else>
							<image src="@/static/img/noProduct.png" mode="aspectFill"
								style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
						</div>
					</div>
					
				</div>
			</ma-refresh>
		</ma-body>
	</div>
</template>

<script>
	import Refersh from '@/$ma/common/js/refresh.js';
	export default{
		data(){
			return{
				page: new Refersh(this, {
					apiName: 'getMarketingList',
				})
			}
		},
		onLoad() {
			this.page.onRefresh();
		},
		methods: {
			toDetail(id,item,userPriority){
				this.$ma.route.detail({
					spuId: id,
					detailType: 'firstShop',
					firstShopDetail: JSON.stringify(item),
					userPriority: JSON.stringify(userPriority)
				})
			}
		},
		onShow(){
			this.page.list = [];
			this.page.onRefresh();
		}
	}
</script>

<style lang="scss">
	.img-box {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.end{
		flex: 1;
		display: flex;
		align-items: end;
		justify-content: flex-end;
	}
	.big-box{
		padding-top: 17.07vw;
		display: flex;
		flex-direction: column;
		.title-box{
			display: flex;
			padding-left: 5.33vw;
			.title-line{
				display: block;
				width: 1.07vw;
				height: 17.07vw;
				border-radius: 12.08vw;
				background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
				margin-right: 3.2vw;
			}
			.input-text{
				display: flex;
				flex-direction: column;
			}
			.title{
				display: flex;
				flex-direction: column;
			}
		}
	
		.list-box{
			display: flex;
			flex-direction: column;
			padding: 0 4.27vw;
			padding-top: 10.13vw;
			
			.item-box{
				display: flex;
				padding: 2.13vw;
				padding-right: 4.27vw;
				background-color: #1B1B1B;
				border-radius: 6.4vw;
				margin-top: 2.67vw;
				.product-img{
					width: 37.33vw;
					height: 37.33vw;
					border-radius: 6.4vw;
					flex-shrink: 0;
					margin-right: 3.2vw;
				}
				.item-info{
					display: flex;
					flex-direction: column;
					padding: 2.13vw 0;
					.item-title{
						font-size: 4.27vw;
						font-weight: 500;
						color: #fff;
						width: 44.53vw;
						overflow: hidden; //超出隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						display: block; // 将对象作为弹性伸缩盒子模型显示。
						-webkit-line-clamp: 2; //超出两行隐藏
						-webkit-box-orient: vertical;
					}
					.item-time{
						margin-top: 1.07vw;
						font-size: 3.2vw;
						font-weight: 300;
						color: #555;
					}
					.look-btn{
						width: 17.07vw;
						line-height: 8.53vw;
						border-radius: 5.33vw;
						background: #A972FF;
						box-shadow: 0vw 1vw 2vw rgba(71,12,114,0.48);
						text-align: center;
						font-size: 3.2vw;
						font-weight: 500;
						color: #000;
					}
				}
			}
		}
	}
</style>